{% extends "base.pug" %}
{% block title %}单词复习{% endblock %}
{% block css %}
{% load sass_tags %}
script(src="/static/js/echarts.min.js")
link(href="{% sass_src 'scss/review.scss' %}" rel="stylesheet" type="text/css")
script(src="/static/js/review.js")
{% endblock %}

{% block content %}
nav.navbar.navbar-light.bg-light.sticky-top
  a.navbar-brand(href="/review/") 
    img(src="/static/media/muyi.png"  height="30" class="d-inline-block align-top" alt="")
    | &nbsp Word Review
  div.d-flex.flex-row
    div.d-flex.flex-row.justify-content-center(style="margin-right: 40px;")
      input#jump-index.form-control
      button#btn-quick-jump.btn 跳转
    div.navbar-nav.ml-auto.flex-row
      li.nav-item(style="margin-right:20px;")
        a.nav-link.repeat.cur-p 重现模式:开
      li.nav-item
        a.nav-link.sort-array 顺序
      li.nav-item
        a.nav-link.sort-array 乱序
      li.nav-item
        a.nav-link.sort-array 记忆序
      li.nav-item
        a.nav-link.sort-array 次数序


div.container.flex-column
  div.align-self-center
    //- div.d-flex.justify-content-center(style="text-align: center")
    //-   div.side-card
    //-   //- div(style="width:300px;margin: 0 36px;").d-flex.justify-content-center
    //-   //-   div#tmpl-word
    //-   div.side-card
        
    div.d-flex.flex-row
      //- left side card
      div.side-card.d-flex.flex-column.justify-content-between
        div
          div#echarts-left.hide
        div
          div#echarts-bottom

      //- middle card
      div
        div(style="width:300px;margin: 0 36px;").d-flex.justify-content-center.flex-column
          div#tmpl-word.text-center
          div#tmpl-phonetic
          div#tmpl-index
        div.d-flex.flex-row
          div.align-self-center.btn-jump#jump-back &laquo;
          div
            div.d-flex.flex-row.justify-content-between
              div#tmpl-last-word
              div(style="margin-right: 20px;")
                div.icon-flags.icon-star-div
                  i.icon-star.icon-disabled
                div.icon-flags.icon-circle-div
                  i.icon-circle.icon-disabled
                div.icon-flags.icon-ok-div
                  i.icon-ok.icon-disabled
            div#meaning-box.rounded.shadow
              div.align-self-center#tmpl-content.hide
          div.align-self-center.btn-jump#jump-forward(style="margin-right: 5px;") &raquo;
        
        //- progress bar
        div.progress-div
          div.progress(style="width:250px; background-color: palevioletred")
            div.progress-bar.bg-dodgerblue(role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100")
              a#tmpl-progress
            div#tmpl-total-num
        div.d-flex.justify-content-center
          div.btn-div
            button.btn.btn-secondary.shadow#btn-forget.jump-btn 不认识
            button.btn.btn-primary.shadow#btn-remember.jump-btn 我记得

      //- right side card: NOTE
      div.side-card.justify-content-center
        #active-note
          div#tmpl-mnemonic.hide
          div(style="color:grey;text-align:center").hide.d-none
            hr
            a Note
          div#tmpl-break-word.hide
          div#tmpl-note.d-n-note.hide(contentEditable="true")
          //- textarea#tmpl-note.form-control.d-n-note.hide
    //- bottom
    div#bottom-box.d-flex.flex-row.justify-content-center(style="margin-top:20px;")
      div.hide#tmpl-sentence(style="max-width: 400px;")
      div.hide#word-sand(style="font-size:12px;max-width: 400px;")
      //- iframe(stc="http://baidu.comdict.cn/mini.php?q=idle")

form
  input#clipboard(style="position: absolute;top: 0;")
{% endblock %}